<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 事件 -->
		
		<script type="text/javascript">
			//事件的绑定
			/**
			 * 函数
			 * 方式1：
			 * 与按钮1的click事件相关联
			 */
			function fun01(){
				alert("按钮1被点击了.......")
			}
			
			/**
			 * 函数：检查文本框的内容是否为空
			 */
			function fun02(){
				alert(this);
			}
			
			/**
			 * 函数：当select选项发生改变时触发
			 */
			function fun03(){
				alert("下拉选项发生了改变......")
			}
			//文档加载结束前被执行
			//alert("dddd");
			
			/**
			 * onload:文档加载结束后触发
			 * 可以定义多次，但只有最后一次才能被执行
			 */
			window.onload = function(){
				//文档加载结束后执行
				alert("tttt1.。。。。。。。。");
			}
			
			
			window.onload = function(){
				//文档加载结束后执行
				//alert("tttt2~~~~~~~~~~~");
				//方式2：
				//后期通过脚本的方式进行绑定
				var btn = document.getElementById("btn2");
				btn.onclick =function(){
					alert("按钮2被点击了.......");
				}
			}
				
				
			//常用事件
			//onclick ：鼠标左键单击事件
			//onblur：焦点丢失时触发
			//onchange:当内容发生改变时触发
			//onload：当文档加载结束后触发
		</script>
	</head>
	<body>
		<input type="button" value="方式1" onclick="fun01()"/>
		<input type="button" value="方式2" id="btn2"/>
		<input type="text"  onblur="fun02()"/>
		<input type="text"  />
		<select onchange="fun03()">
			<option value="0">---请选择---</option>
			<option value="1">Java</option>
			<option value="2">C#</option>
			<option value="3">Python</option>
			<option value="4">Php</option>
		</select>
	</body>
</html>
